import React, { useState } from 'react';
import styles from './Dialog.module.css';

const Dialog = ({cancel, pushSiteList}) => {
  const [name, setName] = useState('');
  const [link, setLink] = useState('');

  return <div className={styles.mask}>
    <div className={styles.dialog}>
      <p className={styles.title}>添加快捷方式</p>
      <p className={styles.sm}>名称</p>
      <input className={styles.input} value={name} onChange={e=>setName(e.target.value)} />
      <p className={styles.sm}>网址</p>
      <input className={styles.input} value={link} onChange={e=>setLink(e.target.value)} />
      <div className={styles.footer}>
        <button onClick={cancel} className={styles.button}>取消</button>
        <button onClick={() => pushSiteList({
          name,
          link,
        })} disabled={!link} className={styles['button--default']}>确认</button>
      </div>
    </div>
  </div>
};
export default Dialog;